<script setup lang="ts">
import { ref, computed } from 'vue';

// 定义响应式数据
const phoneNumber = ref('');
const verificationCode = ref('');
const isCountingDown = ref(false);
const countdown = ref(60);
// 声明题目数据对象，数据包含题目，题目类型（选择题，问答题），题目提示，如果是选择题，包含题目选项
const questionData = ref([
  {
    title: '您选择的漫游目的地是',
    type: 'single-choice', // 'single-choice' 表示单选题，'multiple-choice' 表示多选题，'text' 表示问答题
    tips: '*(1-5分表示非常不满意→非常满意)',
    options: [
      { id: 'A', text: '东南亚东南亚东南亚东南亚东东南亚东南亚东南亚东' },
      { id: 'B', text: '东北亚' },
      { id: 'C', text: '欧洲' },
      { id: 'D', text: '美洲' },
      { id: 'E', text: '大洋洲' }
    ],
    currentQuestion: 1,
    totalQuestions: 7
  },
  {
    title: '您选择的漫游目的地是',
    type: 'single-choice', // 'single-choice' 表示单选题，'multiple-choice' 表示多选题，'text' 表示问答题
    tips: '',
    options: [
      { id: 'A', text: '东南亚' },
      { id: 'B', text: '东北亚' },
      { id: 'C', text: '欧洲' },
    ],
    currentQuestion: 2,
    totalQuestions: 7
  },
  {
    title: '您选择的漫游目的地是',
    type: 'text', // 'single-choice' 表示单选题，'multiple-choice' 表示多选题，'text' 表示问答题
    tips: '我们真诚的请您留下宝贵意见，如没有，可填写“无”。',
    options: [

    ],
    currentQuestion: 3,
    totalQuestions: 7
  }
])
// 添加计算属性获取当前问题
// const currentQuestion = computed(() => {
//   // 这里简化处理，实际可能需要根据用户的答题进度来获取当前问题
//   return questionData.value[0]
// })

// 添加选择答案事件
// 定义当前问题索引
// 确保你已经定义了 currentQuestionIndex
const currentQuestionIndex = ref(0);
// 存储用户答案的响应式对象
const userAnswers = ref<Record<number, string[]>>({});

// 修复 isOptionSelected 函数
const isOptionSelected = (optionId: string) => {
  // 获取当前问题索引
  const currentIndex = currentQuestionIndex.value;
  // 只检查当前问题的答案
  return userAnswers.value[currentIndex]?.includes(optionId) || false;
};
// 标记当前问题是否已回答
const isAnswered = ref(false);

// 计算属性：获取当前问题
const currentQuestion = computed(() => {
  return questionData.value[currentQuestionIndex.value];
});

// 选择答案的处理函数
const selectAnswer = (optionId: string) => {
  // 如果已经回答过，则不再处理
  if (isAnswered.value) return;

  const questionId = currentQuestionIndex.value;

  // 对于单选题，替换现有答案
  if (currentQuestion.value.type === 'single-choice') {
    userAnswers.value[questionId] = [optionId];
    isAnswered.value = true;

    // 2秒后自动跳转到下一题
    setTimeout(() => {
      nextQuestion();
    }, 2000);
  }
  // 对于多选题，切换答案状态
  else if (currentQuestion.value.type === 'multiple-choice') {
    if (!userAnswers.value[questionId]) {
      userAnswers.value[questionId] = [];
    }
    const index = userAnswers.value[questionId].indexOf(optionId);
    if (index > -1) {
      userAnswers.value[questionId].splice(index, 1);
    } else {
      userAnswers.value[questionId].push(optionId);
    }
  }
};

// 提交文本答案
const submitTextAnswer = (answer: string) => {
  const questionId = currentQuestionIndex.value;
  userAnswers.value[questionId] = [answer];
  isAnswered.value = true;

  // 2秒后自动跳转到下一题
  setTimeout(() => {
    nextQuestion();
  }, 2000);
};

// 跳转到下一题
const nextQuestion = () => {
  // 重置回答状态
  isAnswered.value = false;

  // 检查是否是最后一题
  if (currentQuestionIndex.value < questionData.value.length - 1) {
    currentQuestionIndex.value++;
  } else {
    // 这里可以处理完成答题后的逻辑
    alert('恭喜您完成了所有问题！');
  }
};
</script>

<template>
  <div class="container">
    <!-- 背景图 -->
    <div class="bg-image">
      <div class="banner">
        <img src="@/assets/img/answer-banner.png" alt="国际漫游使用体验调研" />
      </div>
      <!-- 内容容器 -->
        <div class="content">
            <!-- 题目 -->
            <div class="question-bg ">
                <div class="question-title">
                    <div class="question-text">
                      <span>{{ currentQuestion.title }}<i v-if="currentQuestion.tips" class="question-textTips">{{ currentQuestion.tips }}</i></span>
                    </div>
                </div>
                <!-- 选择题 -->
                <div v-if="currentQuestion.type === 'single-choice' || currentQuestion.type === 'multiple-choice'" class="itemBox choose">
                  <div v-for="option in currentQuestion.options" :key="option.id" class="question-item" :class="'item' + option.id" @click="selectAnswer(option.id)" :style="{ padding: `${option.text.length >= 8 ? '0.5rem 0px .7rem 0' : '0'}` }">
                        <span :class="{'cur':isOptionSelected(option.id)}">{{ option.text }}</span>
                  </div>
                </div>
                <!-- 问答题 -->
                 <div v-else-if="currentQuestion.type === 'text'" class="itemBox question">
                    <div class="question-tips " v-if="currentQuestion.tips">
                        <span>{{ currentQuestion.tips }}</span>
                    </div>
                    <div class="textArea">
                        <textarea
                            placeholder="请输入内容"
                            class="textareaInput"
                        ></textarea>
                    </div>
                 </div>
                 <div class="pageNum">{{ currentQuestion.currentQuestion }}/{{ currentQuestion.totalQuestions }}</div>
            </div>
            <!-- 提交按钮 -->
             <div class="submitBtn">
                <button @click="submitTextAnswer">提交</button>
            </div>
        </div>
    </div>


  </div>
</template>

<style scoped>
/* 引入公共字体样式 */
@import url('@/assets/styles/fonts.css');


/* // 添加全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 确保html和body充满整个屏幕 */
html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* 基础样式 */
.container {
  position: relative;
  width: 100%;
  /* 使用min-height确保容器至少占满视口，但内容超过时会自动扩展 */
  min-height: 100vh;
  /* 当内容超过容器高度时，允许垂直滚动 */
  overflow-y: auto;
  /* 防止水平滚动条出现 */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 添加内边距，避免内容紧贴边缘 */
  padding: 0.2rem 0;
}

/* 确保背景图能覆盖整个容器，即使高度超过100vh */
.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* height: 100%; */
  /* min-height: 100vh; 确保至少覆盖整个视口高度 */
  background:
    url('@/assets/img/answerbg.jpg') top center/100% auto repeat-y;
  z-index: 0;
}

.question-bg{
  background: url('@/assets/img/questionBg.png') top center/100% 100%;
  width:100%;
  padding-bottom: .6rem;
}
.question-title{
  background:url('@/assets/img/questionTitle.png') top center/100% 100%;
  width:100%;
  height: 1.93rem;
  display: flex;
  align-items: flex-end;
}
.question-text{
  width: 4.8rem;
  height: 1rem;
  margin:0 auto .1rem auto;
  font-size: .32rem;
  text-align: center;
  display: flex;
  align-items: flex-end;
}
.question-text span{
    width: 100%;
    display: block ;
    font-size: .34rem;
    font-family: "HYCuYuanJ";
    font-weight: bold;
    /* 移除原来的纯色 */
    /* color: rgb(255, 251, 242); */
    line-height: 1.289;
    text-align: center;
    /* 文字颜色从左到右，从上到下渐变 */
    background-image: linear-gradient(45deg, #ffffff, #ffe7ac, #e0d3a0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}
.question-textTips{
  display:block;
  font-size:.24rem;
  font-style: normal;
}
.question-item{

  background-repeat: no-repeat;

  min-height: 1rem;
  width: 6.6rem;
  margin: 0 auto;
  text-align: center;
  display:flex;
  align-items: center;
}
.question-item span{
  width: 60%;
  display: block;
  font-size: .3rem;
  font-family: "HYQiHei-55J";
  color: rgb(126, 126, 126);
  text-align: center;
  margin: 0 auto;

}
.question-item span.cur{
  color:#35a1ff;
}
.itemBox{
  margin-top:.5rem;
}
.itemA{
  background: url("@/assets/img/A.png") no-repeat,url("@/assets/img/anOpBg.png") no-repeat;
  background-size: .86rem .86rem, 6.6rem 100%;
  background-position: 0 0, 0 .05rem;
}
.itemB{
  background: url("@/assets/img/B.png") no-repeat,url("@/assets/img/anOpBg.png") no-repeat;
  background-size: .86rem .86rem, 6.6rem 100%;
  background-position: 0 0, 0 .05rem;
}
.itemC{
 background: url("@/assets/img/C.png") no-repeat,url("@/assets/img/anOpBg.png") no-repeat;
  background-size: .86rem .86rem, 6.6rem 100%;
  background-position: 0 0, 0 .05rem;
}
.itemD{
  background: url("@/assets/img/D.png") no-repeat,url("@/assets/img/anOpBg.png") no-repeat;
  background-size: .86rem .86rem, 6.6rem 100%;
  background-position: 0 0, 0 .05rem;
}
.itemE{
  background: url("@/assets/img/E.png") no-repeat,url("@/assets/img/anOpBg.png") no-repeat;
  background-size: .86rem .86rem, 6.6rem 100%;
  background-position: 0 0, 0 .05rem;
}
.pageNum{
  text-align: center;
  margin-top: .1rem;

}
.question-tips{
  /* 文字颜色从左到右，从上到下渐变 */
    background-image: linear-gradient(45deg, #ffffff, #ffe7ac, #e0d3a0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
    font-size:.24rem;
    font-family: "HYCuYuanJ";
    text-align: center;
}
.textArea{
  background: url("@/assets/img/questionTextAreaBg.png") top center/100% 100%;
  width:7.5rem;
  height: 2.5rem;
  margin:0 auto;
  display: flex;
  align-items: center;
}
 .textArea textarea.textareaInput{
    width: 80%;
    height: 50%;
    border: none;
    outline: none; /* 清除聚焦时的蓝色边框 */
    background: transparent;
    font-size: .26rem;
    font-family: "HYQiHei-55J";
    color: rgb(126, 126, 126);
    margin: 0rem auto 0 auto;
    display: block;
}
/* banner图 */
.banner {
  width: 100%;
  /* margin-top: 0.5rem; */
  /* margin-bottom: 0.4rem; */
  text-align: center;
}

.banner img {
  width: 100%;
  height: auto;
}

.submitBtn button{
    background: url("@/assets/img/questionBtn.png") top center/100% 100%;
    width: 4.5rem;
    height:1.1rem;
    font-size: 0;
    border: none;
    margin-top: .4rem;
}

/* 媒体查询优化 */
@media screen and (max-width: 768px) {
  .bg-image {
    background:
      url('@/assets/img/answerbg.jpg') top center/100% auto repeat-y;
    background-color: #f0f0f0;
  }

  /* 小屏幕下移除内容最大宽度限制 */
  .content {
    max-width: 100%;
  }
}

/* 内容容器 */
.content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 768px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding: 0.3rem; */
  box-sizing: border-box;
}

/* 响应式调整 */
@media (max-width: 375px) {


}

@media (min-width: 768px) {
  .content {
    justify-content: center;
    height: 100vh;
  }

}
</style>
